<!-- 产品管理 - 价格体系 - 设置 -->
<template>
  <div class="price-setting">
    <el-container class="container-box">
      <el-header height="auto">
        <div class="info-part">
          <h2>{{ baseInfo.productName }}</h2>
          <el-form
            class="form-part"
            :inline="true"
            ref="ruleForm"
            label-width="140px">
            <el-form-item
              v-for="(item,index) in priceSettingInfo"
              :key="index"
              class="form-item"
              :label="item.label"
            >{{ item.value }}</el-form-item>
          </el-form>
        </div>
      </el-header>
      <div class="content-part">
        <tabs
          :tabs-arr="tabsArr"
          @returnIndex="tabsHandle" />
        <form-renderer
          class="form"
          :content="settingSearchContent"
          label-position="right"
          inline
          ref="searchForm"
        >
          <el-form-item>
            <el-button
              type="primary"
              @click="getSettingList"
              size="small"
              :class="{'isAddWidth':submitLoading}"
              :loading="submitLoading"
            >
              <i
                class="iconfont el-icon-search"
                :class="{'isdisplay':submitLoading}" />
              {{ submitLoading?'':'查询' }}</el-button>
            <el-button
              @click="resetForm"
              size="small">
              <i class="iconfont el-icon-refresh-right"/>
              重置</el-button>
              <!-- <el-button type="primary" @click="addNewOne" size="small">新增</el-button> -->
          </el-form-item>
        </form-renderer>
        <el-editable
          class="table-list"
          :data="priceSettingData"
          v-loading="tableLoading"
          height="200"
          :columns="priceSettingColumns"
        >
          <!-- 序号 -->
          <template
            slot="default-order"
            slot-scope="scope">{{ scope.$index + 1 }}</template>
          <!-- 操作 -->
          <template
            slot="default-history"
            slot-scope="scope">
            <el-button
              size="small"
              @click.stop="showHistoryBtn(scope)"
              type="text">
              历史记录</el-button>
          </template>
          <!-- 销售单价 -->
          <template
            slot="default-commonPrice"
            slot-scope="scope">
            <div class="corver-box">
              <div class="input-corver">
                <el-input
                  type="number"
                  v-model="scope.row.commonPrice"
                  :disabled="!scope.row.commonPriceBol"
                />
              </div>
              <el-button
                size="small"
                @click.stop="changeActiveCommon(scope)"
                type="text"
              >{{ scope.row.commonPriceBol ? '确定':'编辑' }}</el-button>
            </div>
          </template>
          <!-- 促销价 -->
          <template
            slot="default-promotionPrice"
            slot-scope="scope">
            <div class="corver-box">
              <div class="input-corver">
                <el-input
                  type="number"
                  v-model="scope.row.promotionPrice"
                  :disabled="!scope.row.promotionPriceBol"
                />
              </div>
              <el-button
                size="small"
                @click.stop="changeActivePromotion(scope)"
                type="text"
              >{{ scope.row.promotionPriceBol ? '确定':'编辑' }}</el-button>
            </div>
          </template>
        </el-editable>
        <div class="page-box">
          <el-pagination
            align="right"
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.curPage"
            :page-sizes="PAGE_NUMBER"
            :page-size="page.pageSize"
            :layout="PAGINATION_LAYOUT"
            :total="page.total"
          />
        </div>
      </div>
    </el-container>
    <!-- 历史记录 -->
    <el-dialog
      title="历史记录"
      :visible.sync="showHistoryList"
      width="30%">
      <el-editable
        class="table-list"
        :data="historyData"
        v-loading="hisTableLoading"
        height="200"
        :columns="priceSettingHistoryColumns"
      >
        <!-- 序号 -->
        <template
          slot="default-order"
          slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-editable>
    </el-dialog>
  </div>
</template>

<script>
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common.js'
import {
  priceSettingColumns,
  priceSettingHistoryColumns,
  settingSearchContent,
  tabsArr,
  operationTypeMap
} from './const.js'
import {
  getProductSpecialPriceList,
  getProductSpecialPriceHis,
  updateProductSpecialPrice
} from '@const/beforeSettleApi.js'
import ElEditable from '@components/el-editable/index.vue'
import tabs from '@components/tabs/index.vue'
import FormRenderer from '@femessage/el-form-renderer'
import { cloneDeep, hasIn } from 'lodash'
export default {
  name: 'PriceSetting',
  components: { ElEditable, tabs, FormRenderer },
  data () {
    return {
      submitLoading: false,
      tabsArr,
      PAGE_NUMBER,
      PAGINATION_LAYOUT,
      priceSettingColumns,
      settingSearchContent,
      priceSettingHistoryColumns,
      operationTypeMap,
      priceSettingInfo: [],
      priceSettingData: [],
      historyData: [],
      baseInfo: {
        productName: '',
        category: '',
        spec: '',
        certificateNumber: ''
      },
      page: {
        curPage: 1,
        pageSize: PAGE_NUMBER[0],
        total: 0
      },
      tabIndex: 0,
      showHistoryList: false,
      tableLoading: false,
      hisTableLoading: false
    }
  },
  methods: {
    tabsHandle (index) {
      this.tabIndex = this.tabsArr[index].val
      this.getSettingList()
    },
    handleSizeChange (item) {
      this.page.pageSize = item
      this.getSettingList()
    },
    handleCurrentChange (item) {
      this.page.curPage = item
      this.getSettingList()
    },
    // 新增一条数据，
    // addNewOne() {
    //   this.priceSettingData.push([{
    //     //是否可以修改名称，仅新增时可修改，同时可以用于判断是新增还是修改的逻辑
    //     isNew:true,

    //   }])
    // },
    getSettingList () {
      let params = this.$refs.searchForm.getFormValue()
      let data = {
        platCode: this.$route.query.platCode,
        itemId: this.$route.query.itemId,
        unitId: this.$route.query.unitId,
        consumerName: this.$route.query.companyName || '',
        consumerType: 1,
        consumerSearch: params.consumerSearch || '',
        size: this.page.pageSize
      }
      if (this.tabIndex === 0) {
        data.consumerType = 1
      } else {
        data.consumerType = 2
      }
      this.tableLoading = true
      this.submitLoading = true
      this.$axios({
        method: 'post',
        url: getProductSpecialPriceList,
        data: data
      })
        .then(res => {
          let arr = hasIn(res, ['data', 'payload']) ? res.data.payload : []
          this.priceSettingData = arr.content
          this.priceSettingData.forEach((item, index) => {
            // 设置每行需要的内容
            this.$set(item, 'promotionPriceBol', false)
            this.$set(item, 'commonPriceBol', false)
            // this.$set(item, 'isNew', false)
          })
          this.page.total = res.data.payload.totalElements
        })
        .catch(() => {})
        .finally(() => {
          this.submitLoading = false
          this.tableLoading = false
        })
    },
    resetForm () {
      this.$refs.searchForm.resetFields()
      this.getSettingList()
    },
    // 修改有不同的类型，分别为：1--新增销售单价   2--新增促销价  3--修改销售单价  4--修改促销价
    // 修改销售价
    changeActiveCommon (scope) {
      if (this.priceSettingData[scope.$index].commonPriceBol) {
        this.upDataPrice(scope, 3)
      }
      this.priceSettingData[scope.$index].commonPriceBol = !this
        .priceSettingData[scope.$index].commonPriceBol
    },
    // 修改促销价
    changeActivePromotion (scope) {
      if (this.priceSettingData[scope.$index].promotionPriceBol) {
        this.upDataPrice(scope, 4)
      }
      this.priceSettingData[scope.$index].promotionPriceBol = !this
        .priceSettingData[scope.$index].promotionPriceBol
    },
    upDataPrice (scope, type) {
      let data = {
        id: scope.row.id,
        consumerId: scope.row.consumerId,
        itemId: this.$route.query.itemId,
        unitId: this.$route.query.unitId,
        commonPrice: Number(scope.row.commonPrice),
        promotionPrice: Number(scope.row.promotionPrice),
        operationType: type
      }
      if (this.tabIndex === 0) {
        data.consumerType = 1
      } else {
        data.consumerType = 2
      }
      this.$axios({
        method: 'post',
        url: updateProductSpecialPrice,
        data: data
      })
        .then(res => {
          this.getSettingList()
          this.$message({ type: 'success', message: '修改成功' })
        })
        .catch(() => {
          this.$message({ type: 'warning', message: '修改失败' })
          this.getSettingList()
        })
    },
    showHistoryBtn (scope) {
      this.showHistoryList = true
      this.hisTableLoading = true
      this.$axios({
        method: 'get',
        url: getProductSpecialPriceHis,
        params: {
          relatedId: scope.row.id,
          // 无分页，先这样搞
          size: 9999
        }
      })
        .then(res => {
          let arr = hasIn(res, ['data', 'payload']) ? res.data.payload : []
          this.historyData = arr
        })
        .catch(() => {})
        .finally(() => {
          this.hisTableLoading = false
        })
    },
    _initInfo () {
      this.baseInfo = {
        productName: this.$route.query.productName || '',
        category: this.$route.query.category || '',
        spec: this.$route.query.spec || '',
        certificateNumber: this.$route.query.certificateNumber || '',
        platCode: this.$route.query.platCode || ''
      }
      this.priceSettingInfo = [
        { label: '产品编码', value: this.baseInfo.platCode },
        { label: '类别', value: this.baseInfo.category },
        { label: '注册证号(或备案号)', value: this.baseInfo.spec },
        { label: '规格型号', value: this.baseInfo.certificateNumber }
      ]
    }
  },
  mounted () {
    this.getSettingList()
    this._initInfo()
  }
}
</script>

<style lang="less">
.price-setting {
  height: 100%;
  display: flex;

  .el-header {
    padding: 0;
  }

  .container-box {
    flex-direction: column;

    .content-part {
      height: 100%;
      flex-direction: column;
      display: flex;

      .table-list {
        flex: 1;
      }
    }

    .page-box {
      margin-top: 20px;
    }
  }

  .info-part {
    h2 {
      border-bottom: 1px solid #eef0f5;
      line-height: 50px;
      font-size: 16px;
    }

    .form-part {
      font-size: 12px;
      margin: 10px 0;
      line-height: 16px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;

      .el-form-item {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      .el-form-item__label {
        line-height: 16px;
        color: #a7b1c7;
      }

      .el-form-item__content {
        line-height: 16px;
      }
    }
  }

  .corver-box {
    display: flex;
    align-items: center;
  }

  .input-corver {
    display: flex;
    align-items: center;
    margin-right: 10px;
  }
}
</style>
